<template>
  <div
    :style="activeStyle(current, item.value)"
    class="tab"
    :class="{ activeColor: current > item.value || current === item.value }"
    v-for="item in options"
    :key="item.value + 'currentState'"
    >{{ item.label }}</div
  >
</template>

<script setup>
import useSettingsStore from "@/store/modules/settings";
const props = defineProps({
  // 注意value一定是1、2、3、...
  options: {
    type: Array,
    default: [
      { label: "草稿", value: 1 },
      { label: "审批中", value: 2 },
      { label: "审批通过", value: 3 },
    ],
  },
  // current一定是1、2、3、...
  current: {
    type: Number,
    default: 2,
  },
});

// 设置主题色
const theme = computed(() => useSettingsStore().theme);
function activeStyle(current, value) {
  const color = current > value || current === value ? theme.value : "#ccc";
  return {
    "background-color": color,
    // "border-color": theme.value
  };
}
</script>

<style lang='scss' scoped>
.tab {
  text-align: center;
  cursor: pointer;
  transition: 0.5s;
  flex: 1;
  width: 150px;
  max-width: 150px;
  height: 28px;
  line-height: 28px;
  background: #ccc;
  color: white;
  font-size: 14px;
  clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%, 8% 50%);
}
span:first-child {
  clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%, 0% 50%);
}
span:last-child {
  // clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 5% 50%);
}
.activeColor {
  background: #2369bd;
}
</style>